<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        v-model="loginForm.tenantId"
        auto-complete="off"
        :placeholder="$t('login.tenantId')"
      >
        <i slot="prefix" class="icon-quanxian" />
      </el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        v-model="loginForm.username"
        auto-complete="off"
        :placeholder="$t('login.username')"
      >
        <i slot="prefix" class="icon-yonghu" />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        :type="passwordType"
        v-model="loginForm.password"
        auto-complete="off"
        :placeholder="$t('login.password')"
      >
        <i
          class="el-icon-view el-input__icon"
          slot="suffix"
          @click="passwordType = passwordType === 'password' ? '' : 'password'"
        />
        <i slot="prefix" class="icon-mima" />
      </el-input>
    </el-form-item>
    <el-form-item v-if="this.website.captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">
          <el-input
            size="small"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.code"
            auto-complete="off"
            :placeholder="$t('login.code')"
          >
            <i slot="prefix" class="icon-yanzhengma" />
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="login-code">
            <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit"
        >{{ $t('login.submit') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import { info } from '@/api/system/tenant'
import { getCaptcha } from '@/api/user'
import { getTopUrl } from '@/util/util'
export default {
  name: 'Userlogin',
  props: ['form'],
  data() {
    const { tenantId = '000000', deptId = '', roleId = '', username = '', password = '' } = this.form || {}
    return {
      tenantMode: this.website.tenantMode,
      passwordType: 'password',
      loginForm: {
        //租户ID
        tenantId,
        //部门ID
        deptId,
        //角色ID
        roleId,
        //用户名
        username,
        //密码
        password,
        //账号类型
        type: 'account',
        //验证码的值
        code: '',
        //验证码的索引
        key: '',
        //预加载白色背景
        image: ''
      },
      loginRules: {
        tenantId: [{ required: false, message: '请输入租户ID', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, message: '密码长度最少为6位', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTenant()
    this.refreshCode()
  },
  watch: {
    // 'loginForm.deptId'() {
    //   const column = this.findObject(this.userOption.column, 'deptId')
    //   if (this.loginForm.deptId.includes(',')) {
    //     column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`
    //     column.display = true
    //   } else {
    //     column.dicUrl = ''
    //   }
    // },
    // 'loginForm.roleId'() {
    //   const column = this.findObject(this.userOption.column, 'roleId')
    //   if (this.loginForm.roleId.includes(',')) {
    //     column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`
    //     column.display = true
    //   } else {
    //     column.dicUrl = ''
    //   }
    // }
  },
  computed: { ...mapGetters(['tagWel', 'userInfo']) },
  methods: {
    openUserInfo() {
      this.$quickModal({
        title: '用户信息选择',
        width: '350px',
        component: require('@/components/base/user-info-select').default
      })
    },
    refreshCode() {
      if (!this.website.captchaMode) return
      getCaptcha().then(res => {
        const { key, image } = res.data
        this.loginForm.key = key
        this.loginForm.image = image
      })
    },
    submitLogin(form, done) {
      if (form.deptId) {
        this.loginForm.deptId = form.deptId
      }
      if (form.roleId) {
        this.loginForm.roleId = form.roleId
      }
      this.handleLogin()
      done()
    },
    async handleLogin() {
      let loading = null
      try {
        const volid = await this.$refs.loginForm.validate()
        if (!volid) return
        loading = this.$loading({ lock: true, text: '登录中,请稍后。。。', spinner: 'el-icon-loading' })

        await this.$store.dispatch('LoginByUsername', this.loginForm)

        if (this.website.switchMode) {
          const deptId = this.userInfo.dept_id
          const roleId = this.userInfo.role_id
          if (deptId.includes(',') || roleId.includes(',')) {
            this.loginForm.deptId = deptId
            this.loginForm.roleId = roleId
            // this.openUserInfo()
            this.$store.dispatch('LogOut').then(loading.close)
            return false
          }
        }
        this.$router.push({ path: this.tagWel.value })
        loading.close()
      } catch (error) {
        loading.close()
        this.refreshCode()
        console.log(error)
      }
    },
    getTenant() {
      let domain = getTopUrl()
      // 临时指定域名，方便测试
      // domain = 'https://bladex.vip'
      info(domain).then(res => {
        const data = res.data
        if (data.success && data.data.tenantId) {
          this.tenantMode = false
          this.loginForm.tenantId = data.data.tenantId
          this.$emit('update:background-image', data.data.backgroundUrl)
        }
      })
    }
  }
}
</script>
